.App {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  height: 100%;
  height: -webkit-fill-available;
  min-height: 100%;
  max-height: 100%;
}

@media (max-width: 799px) {
  .TextareaContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 800px) {
  .App {
    grid-template-rows: none;
    display: flex;
  }

  .TextareaContainer {
    border-bottom: none;
    box-shadow: inset -1px 0px 0px var(--color);
  }
}

.TextareaContainer {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color);
}

.resizer {
  position: absolute;
  bottom: 0;
  left: 0;
  visibility: hidden;
  z-index: -1;
  width: 128px;
  display: inline-block;
  word-break: keep-all;
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

.resizableHandle {
  background-color: black;
  opacity: 0;
}

.resizableHandle:hover,
.resizableHandle:active {
  opacity: 0.25;
}
